[LESS] 여러개의 LESS 파일을 하나의 css로 만드는 방법

만약 여러개의 less 파일을 하나로 만드려면(compile) 어떻게 해야할까요? 아래의 방법으로 가능합니다.

# 여러개의 less 파일 하나의 stylesheet로 변경하기

일단 lessc을 사용하여 css를 만들기 위해 다음의 less 파일이 존재하는 예제입니다.

위의 less 파일은 각각의 css를 가지고 있습니다. 이를 하나로 compile하여 test.css로 만드는 경우 아래의 방법을 따라야 합니다.

• 하나의 compile 목적의 less파일을 생성(예를들어 test.less를 만듦)
• 만들어진 test.less에 각각의 less파일을 @import함
• test.less파일을 test.css로 compile 실시

위 과정에서 각각의 less파일을 @import하면 아래와 같을 것입니다.
@test.less

이 파일을 compile하여 최종 css파일을 만들게됩니다.

여기까지 간단하게 여러 less파일을 하나로 compile하는 방법을 알아보았습니다.

! 또 다른 방법의 less compile

위 방법 역시 find를 사용하여 모든 less를 하나의 test.css로 compile합니다.

# 마치면서

less또는 sass의 pre-processor의 사용이 매우 많습니다. 선택자를 정해진 문법으로 적용하면 매우 복잡하던 과정이 쉽게 지정 가능하고 변수 및 편의 기능의 함수 제공도 그 이유이지만 minify 압축 등의 기능들도 plugin 형태로 제공될 뿐만 아니라 자체 linting 기능 등등 들여다볼수록 여러가지 장점들이 많기 때문입니다.

과거 개발단계에서 꺼려지던 부분이 있다하면 계속해서 반드시 css로 변환해야한다는 점이었습니다.. 물론 이 부분이 꼭 필요하므로 번거로울 수 있습니다. 특히 조금이라도 빨리 확인 검증을 위해서도 그렇죠... 하지만 요즘은 컴파일이 필요한 시점에만... 즉 테스트 및 배포과정에서만 변환할 수 있는 다양한 방법들도 많아 그 불편함이 적어 더 많이 사용되지 않나 생각됩니다.